<template>
    <div>
        <van-nav-bar fixed :title="currentName"
                     left-text="操作" right-text="搜索"
                     @click-right="showSeach = true"
                     @click-left="showControl=true"
                     style="height: 40px"/>
        <!--带按钮-->
        <!--<van-cell v-for="(name,index) in jsonData" :title="name" :key="index">-->
        <!--<van-radio-group v-model="sex"  >-->
        <!--<van-row>-->
        <!--<van-col span="24">-->
        <!--<van-button size="small" plain type="primary">播放</van-button>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <!--</van-radio-group>-->
        <!--</van-cell>-->

        <!--直接点击-->
        <van-row>
            <van-cell-group>
                <van-cell v-for="(name,index) in jsonData" :title="name" :key="index" is-link
                          @click="clickCell(name)"/>
            </van-cell-group>
        </van-row>

        <!--搜索动作面板-->
        <van-action-sheet v-model="showSeach" title="标题">
            <div class="content">
                <van-search
                        v-model="value"
                        show-action
                        placeholder="请输入搜索关键词"
                >
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </div>
        </van-action-sheet>

        <!--控制动作面板-->
        <van-action-sheet v-model="showControl" title="控制">
            <div class="content">
                <van-button plain type="primary" @click="handleControl('stop')">停止播放</van-button>
                <van-button plain type="primary" style="margin-left: 15px" @click="handleControl('random')">随机播放
                </van-button>
                <br>
                <van-button plain type="primary" style="margin-top: 15px" @click="handleControl('increase')">增大音量
                </van-button>
                <van-button plain type="primary" style="margin-left: 15px" @click="handleControl('reduce')">减小音量
                </van-button>
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
    export default {
        name: 'PlayMusic',
        data() {
            return {
                value: "",
                showSeach: false,
                showControl: false,
                jsonData: [],//所有歌名
                currentName: "当前正在播放",//正在播放
                totalMp3: 0,
            }
        },
        mounted() {
            this.loadJsonFile();
        },
        methods: {
            loadJsonFile() {
                const filePath = 'mp3Info.txt'; // 指定本地JSON文件路径
                this.$axios.get(filePath)
                    .then((response) => {
                        // this.jsonData = response.data; // 将获取到的JSON数据保存到组件的数据属性中
                        // console.log(response.data);
                        // this.jsonData = response.data;
                        const linesArray = response.data.split('\n');
                        // console.log(linesArray);
                        // console.log(linesArray.length);
                        this.jsonData = linesArray;
                        this.totalMp3 = linesArray.length;
                    })
                    .catch((error) => {
                        console.log('Error loading local JSON file:', error);
                    });
            },
            clickCell(name) {
                // console.log(name);
                this.currentName = "当前正在播放：" + name;
                // console.log(parseInt(name.substring(0, 4)));
                // console.log("/playMusic?param=playMusic#" + (this.totalMp3 - parseInt(name.substring(0, 4))) + "$");
                let musicId = parseInt(name.substring(0, 4)) + 1;
                console.log("musicId：" + musicId);
                this.$axios.get("/playMusic?param=playMusic*" + musicId + "$").then(
                    response => {
                        console.log("playMusic请求成功了", response.data);
                    },
                    error => {
                        console.log("playMusic请求失败了", error.message)
                    }
                )
            },
            onSearch() {
                const filePath = 'mp3Info.txt'; // 指定本地JSON文件路径
                this.$axios.get(filePath)
                    .then((response) => {
                        // this.jsonData = response.data; // 将获取到的JSON数据保存到组件的数据属性中
                        // console.log(response.data);
                        // this.jsonData = response.data;
                        const linesArray = response.data.split('\n');
                        // console.log(linesArray);
                        const newLinesArray = [];
                        linesArray.forEach((item) => {
                            if (item.indexOf(this.value) > -1) {
                                newLinesArray.push(item);
                            }
                        });
                        // console.log(newLinesArray);
                        this.jsonData = newLinesArray;
                        this.showSeach = false;
                    })
                    .catch((error) => {
                        console.log('Error loading local JSON file:', error);
                    });
            },
            handleControl(param) {
                if (param === "stop") {
                    this.$axios.get("/playMusic?param=control*stop$").then();
                }
                if (param === "random") {
                    var num = Math.floor(Math.random() * Math.floor(this.totalMp3));
                    this.$axios.get("/playMusic?param=playMusic*" + num + "$").then();
                }
                if (param === "increase") {
                    this.$axios.get("/playMusic?param=control*increase$").then();
                }
                if (param === "reduce") {
                    this.$axios.get("/playMusic?param=control*reduce$").then();
                }
            }
        }
    }
</script>

<style>
    #light {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 150px;
    }


    .content {
        padding: 16px 16px 100px;
    }
</style>
